<template>
  <div class="diagnosis">
    <div class="home-banner">
    </div>
    <div class="Loading" v-if="!ctrListdata">
      <a-spin dot />
    </div>
    <div class="diagnosis-list" v-for="(items, indexs) in ctrListdata" :key="indexs">
      <a-space direction="vertical" :size="16" style="display: block">
        <a-row class="grid-demo">
          <a-col :span="5" :md="5" :xs="8">
            <div class="time">{{ items.AddTime }}</div>
          </a-col>
          <a-col :span="10" :md="10" :xs="16">
            <div class="name">
              <img src="/img/bianzu.png" style="width: 10px; height: 10px" alt="" />
              <span style="margin: 0 0 0 5px">{{ items.SaveName }}</span>
            </div>
          </a-col>

          <a-col :span="3" :md="3" :xs="8">
            <a-button size="small" class="start" @click="eportdetails(items)" type="primary">报告详情</a-button>
            <!-- <div style="cursor: pointer;" @click="eportdetails(items)">报告详情</div> -->
          </a-col>
          <a-col :span="3" :md="3" :xs="8">
            <a-button size="small" type="primary" class="start" style="cursor: pointer"
              @click="answerdetails(items)">作答详情</a-button>
          </a-col>
          <!-- <a-col :span="3" :md="3" :xs="6">
            <a-button size="small" type="primary" class="start" style="cursor: pointer"
              @click="interpret(items)">一键解读</a-button>
          </a-col> -->
          <a-col :span="3" :md="3" :xs="8">
            <a-button size="small" type="primary" class="start" style="cursor: pointer"
              @click="eportdetails(items)">下载报告</a-button>
          </a-col>
        </a-row>
      </a-space>
    </div>
    <a-empty v-if="total == 0" class="empty" />
    <div v-if="total != 0" style="
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px 0 0 0;
        font-size: 1vw;
        /* 假设父容器高度为视口高度 */
      ">
      <a-space direction="vertical" :size="16" style="display: block; text-align: center">
        <a-row>
          <a-col :span="24">
            <a-pagination v-if="windowwidth > 768" :total="total" show-total :current="RefundReadForm.page" @change="pageNumChange" />
            <a-pagination v-if="windowwidth <= 768" :total="total"  :current="RefundReadForm.page" @change="pageNumChange" />
          </a-col>
        </a-row>
      </a-space>
    </div>
  </div>

  <!-- <a-button @click="handleClick">Open Modal</a-button> -->
  <!-- @ok="handleOk" @cancel="handleCancel" -->
  <a-modal v-model:visible="visible" class="visible" width="50vw" modalClass="liatname">
    <template #title>
      <div class="liatname">添加微信</div>
    </template>
    <div class="liatname">
      <img class="liatlist" :src="qrcode_teacher" alt="" />
      <div style="font-size: 16px; color: #03305c">
        手机微信扫二维码 添加老师微信
      </div>
      <div style="color: #8393a3; font-size: 14px">与老师沟通 获取解答内容</div>
    </div>

    <template #footer>
      <a-row justify="center">
        <a-col :span="6" style="text-align: center">
          <a-button class="question_icon" type="primary" @click="handleOk">保存二维码</a-button>
        </a-col>
        <!-- <a-col :span="6" style="text-align: center">
              <a-button @click="handleCancel">关闭</a-button>
            </a-col> -->
      </a-row>
    </template>
  </a-modal>
  <a-modal v-model:visible="visiblelist" class="visible" width="50vw" modalClass="liatname">
    <template #title>
      <div class="liatname">作答详情</div>
    </template>
    <div class="liatname">
      <!-- <img class="liatlist" src="" alt="" />class="question_icon" -->
      答题暂未完成 是否继续答题
    </div>
    <template #footer>
      <a-row justify="center">
        <a-col :span="6" style="text-align: center">
          <a-button class="buttonwidth" type="primary" @click="handleOkquestions">继续</a-button>
        </a-col>
        <a-col :span="6" style="text-align: center">
          <a-button class="buttonwidth" @click="handleCancel">关闭</a-button>
        </a-col>
      </a-row>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import { Message } from "@arco-design/web-vue";
import { getPermission } from "@/utils/subject";
import { useRouter } from "vue-router";
import { getStudentPage, apiindex, loginGetAreas } from "@/api/login";
import { postMyHomeworkctrList } from "@/api/diagnosis";
import { MyHomeworkdocCorrect } from "@/api/measure";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();

const subjectID = userStore.$state.subjectID;
// import useUserStore from '@/store/modules/user/index';../../api/diagnosis
const router = useRouter();

const visible = ref(false);
const visiblelist = ref(false);
const total = ref();
const qrcode_teacher = ref();
const windowwidth = ref(window.innerWidth);

//
const interpret = (e: any) => {
  // if (!getPermission(e.SubjectID)) {
  //   // 替换为你的实际权限ID
  //   // 没有权限时显示提示
  //   Message.warning("您没有权限访问此内容，请联系管理员");
  //   return;
  // }
  qrcode_teacher.value = e.qrcode_teacher;
  visible.value = true;
};
//弹窗
const handleOk = async () => {
  try {
    // 使用 fetch API 获取图片资源
    const response = await fetch(qrcode_teacher.value);
    // 将响应内容转换为 Blob 对象
    const blob = await response.blob();
    // 创建一个 a 标签
    const link = document.createElement("a");
    // 为 Blob 对象创建一个临时的 URL
    link.href = URL.createObjectURL(blob);
    // 设置下载的文件名
    link.download = "downloaded_image.jpg";
    // 将 a 标签添加到 document.body 中
    document.body.appendChild(link);
    // 模拟点击 a 标签
    link.click();
    // 释放临时 URL 以节省内存
    URL.revokeObjectURL(link.href);
    // 移除 a 标签
    document.body.removeChild(link);
  } catch (error) {
    console.error("下载图片时出错:", error);
  }
};
// 报告详情Diagnosis/Reportdetails
const eportdetails = (e: any) => {


  // if (!getPermission(e.SubjectID)) {
  //   // 替换为你的实际权限ID
  //   // 没有权限时显示提示
  //   Message.warning("您没有权限访问此内容，请联系管理员");
  //   return;
  // }

  if (e.IsCommit == 0 || e.IsCommit == null) {

    Message.error("请先完成测卷作答");
  } else {
    // console.log(e);
    // return false;
    MyHomeworkdocCorrect({ ctrID: e.CTRID as string }).then((res: any) => {
      router.push({
        name: "Diagnosis/Reportdetails",
        query: {
          SubjectID: e.SubjectID,
          CTRID: e.CTRID,
          SaveID: e.SaveID,
        },
      });
    })
  }
  // e.SubjectID 学科id
  // e.CTRID
  // e.SaveID
};

const TestIDdata = ref();
const CTRIDdata = ref();
//作答详情
const answerdetails = (items: any) => {
  // 使用 router.push 并通过 query 传递参数  $route.query
  //   router.push('/Measure/answerQuestions');

  // if (!getPermission(items.SubjectID)) {
  //   // 替换为你的实际权限ID
  //   // 没有权限时显示提示
  //   Message.warning("您没有权限访问此内容，请联系管理员");
  //   return;
  // }
  if (items.IsCommit == 0 || items.IsCommit == null) {
    visiblelist.value = true;
    TestIDdata.value = items.TestID;
    CTRIDdata.value = items.CTRID;
  } else {
    router.push({
      name: "/Measure/answerQuestions",
      query: {
        type: 2, //判断是不是详情
        TestID: items.TestID,
      },
    });
  }
};
const handleCancel = () => {
  visiblelist.value = false;
};
// 继续作答
const handleOkquestions = () => {
  router.push({
    name: "/Measure/answerQuestions",
    query: {
      type: 9, //判断是不是详情
      textId: TestIDdata.value,
      CTRID: CTRIDdata.value,
    },
  });
};
const RefundReadForm = reactive({
  page: 1,
  type: 0,
  subjectID: 0
});
const ctrListdata = ref();

const ctrList = () => {
  postMyHomeworkctrList(RefundReadForm).then((res: any) => {
    total.value = res.count;
    ctrListdata.value = res.list;
  });
};

// 分页切换
const pageNumChange = (page: number) => {
  if (page !== 0) {
    RefundReadForm.page = page;
    ctrList();
  }
};
watch(
  () => userStore.$state.subjectID,
  async (newValue, oldValue) => {

    try {
      if (newValue) {
        RefundReadForm.subjectID = newValue;
        await ctrList();
      }

      // docsaveData.value = data;
    } catch (error) {
      console.error("获取数据出错:", error);
    }
  },
  { immediate: true }
);
onMounted(() => {

  // ctrList();
});
</script>
<style lang="less" scoped>
/* Banner横幅区域 */
.home-banner {
  width: 100%;
  height: 200px;
  background-color: #fff;
  background-image: url("/img/shanyaozhe.png");
  background-size: 100% 100%;
  border-radius: 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

/* 为模态框的内容区域添加渐变色 */
.ant-modal-content {
  background: linear-gradient(to bottom, #e0f7fa, #b2ebf2);
}

.liatlist {
  width: 10.42vw;
  height: 10.42vw;
  background: #ffffff;
  border-radius: 19px;
  border: 4px solid rgba(0, 117, 255, 0.2);
}

/* 使用 :deep 穿透样式作用域修改模态框头部背景颜色 */
.liatname {

  font-size: 1vw;
  text-align: center;
  padding: 0;
  margin: 0;
}

.diagnosis {
  background: #f7fbff;
  width: 100%;
  height: 100%;
  position: relative;
}

.diagnosis-list {
  height: 70px;
  background: #ffffff;
  border-radius: 8px;
  font-weight: 400;
  font-size: 1vw;
  color: #0075ff;
  margin-bottom: 24px;
}

.grid-demo {
  text-align: center;
  line-height: 70px;
}

.time {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 1vw;
  color: #03305c;

  font-style: normal;
}

.name {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 1vw;
  color: #03305c;
  text-align: left;
  margin: 0 5px;
  font-style: normal;
}

.pagination {
  width: 550px;
  height: 30px;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  bottom: 20px;
  left: 30%;
}

.question_icon {
  width: 10vw;
  font-size: 1vw;
}

// .visible{
//     width: 50vw;
//   }
@media (max-width: 768px) {

  // .visible{
  //   width: 50vw;
  // }
  .buttonwidth {
    width: 9vw;
    font-size: 3vw;
  }

  .question_icon {

    width: 15vw;
    font-size: 3vw;
  }

  .liatname {
    font-size: 3vw;
    text-align: center;
    padding: 0;
    margin: 0;
  }

  .start {
    width: 10vw;
    height: 3vh;
    font-size: 2vw;
  }

  .name {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 15px;
    color: #03305c;
    text-align: left;
    margin: 0 5px;
    font-style: normal;
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    white-space: nowrap;
    /* 不换行 */
  }

  .time {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 15px;
    color: #03305c;

    font-style: normal;
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    white-space: nowrap;
    /* 不换行 */
  }
}
</style>
